<html lang="en"><head></head><body>
    <form id="mainForm" method="post" action="https://run.stackblitz.com/api/angular/v1" target="_self"><input type="hidden" name="files[src/app/app.component.ts]" value="/* tslint:disable:forin member-ordering */

import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';

import { Hero } from './hero';

export enum Color {Red, Green, Blue};

/**
 * Giant grab bag of stuff to drive the chapter
 */
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, OnInit {

  ngOnInit() {
    this.resetHeroes();
    this.setCurrentClasses();
    this.setCurrentStyles();
  }

  ngAfterViewInit() {
    // Detect effects of NgForTrackBy
    trackChanges(this.heroesNoTrackBy,   () => this.heroesNoTrackByCount++);
    trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
  }

  @ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
  @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;

  actionName = 'Go for it';
  badCurly = 'bad curly';
  classes = 'special';
  help = '';

  alert(msg?: string)      { window.alert(msg); }
  callFax(value: string)   { this.alert(`Faxing ${value} ...`); }
  callPhone(value: string) { this.alert(`Calling ${value} ...`); }
  canSave =  true;

  changeIds() {
    this.resetHeroes();
    this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++);
    this.heroesWithTrackByCountReset = -1;
  }

  clearTrackByCounts() {
    const trackByCountReset = this.heroesWithTrackByCountReset;
    this.resetHeroes();
    this.heroesNoTrackByCount = -1;
    this.heroesWithTrackByCount = trackByCountReset;
    this.heroIdIncrement = 1;
  }

  clicked = '';
  clickMessage = '';
  clickMessage2 = '';

  Color = Color;
  color = Color.Red;
  colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }

  currentHero: Hero;

  deleteHero(hero?: Hero) {
    this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
  }

  evilTitle = 'Template <script>alert(&quot;evil never sleeps&quot;)</script>Syntax';

  fontSizePx = 16;

  title = 'Template Syntax';

  getVal(): number { return 2; }

  name: string = Hero.heroes[0].name;
  hero: Hero; // defined to demonstrate template context precedence
  heroes: Hero[];

  // trackBy change counting
  heroesNoTrackByCount   = 0;
  heroesWithTrackByCount = 0;
  heroesWithTrackByCountReset = 0;

  heroIdIncrement = 1;

  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
  // Public Domain terms of use: http://www.wpclipart.com/terms.html
  heroImageUrl = 'assets/images/hero.png';
  // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
  // Public Domain terms of use http://www.clker.com/disclaimer.html
  villainImageUrl = 'assets/images/villain.png';

  iconUrl = 'assets/images/ng-logo.png';
  isActive = false;
  isSpecial = true;
  isUnchanged = true;

  get nullHero(): Hero { return null; }

  onClickMe(event?: KeyboardEvent) {
    let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
    this.alert('Click me.' + evtMsg);
  }

  onSave(event?: KeyboardEvent) {
    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
    this.alert('Saved.' + evtMsg);
    if (event) { event.stopPropagation(); }
  }

  onSubmit(data: any) {/* referenced but not used */}

  product = {
    name: 'frimfram',
    price: 42
  };

  // updates with fresh set of cloned heroes
  resetHeroes() {
    this.heroes = Hero.heroes.map(hero => hero.clone());
    this.currentHero = this.heroes[0];
    this.hero = this.currentHero;
    this.heroesWithTrackByCountReset = 0;
  }

  setUppercaseName(name: string) {
    this.currentHero.name = name.toUpperCase();
  }

  currentClasses: {};
  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
      'saveable': this.canSave,
      'modified': !this.isUnchanged,
      'special':  this.isSpecial
    };
  }

  currentStyles: {};
  setCurrentStyles() {
    // CSS styles: set per current state of component properties
    this.currentStyles = {
      'font-style':  this.canSave      ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
      'font-size':   this.isSpecial    ? '24px'   : '12px'
    };
  }

  trackByHeroes(index: number, hero: Hero): number { return hero.id; }

  trackById(index: number, item: any): number { return item['id']; }
}

// helper to track changes to viewChildren
function trackChanges(views: QueryList<ElementRef>, changed: () => void) {
  let oldRefs = views.toArray();
  views.changes.subscribe((changes: QueryList<ElementRef>) => {
      const changedRefs = changes.toArray();
      // Check if every changed Element is the same as old and in the same position
      const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement);
      if (!isSame) {
        oldRefs = changedRefs;
        // wait a tick because called after views are constructed
        setTimeout(changed, 0);
      }
  });
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/app.module.1.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/app.module.ts]" value="import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent } from './app.component';
import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
import { ClickDirective, ClickDirective2 } from './click.directive';
import { HeroFormComponent }      from './hero-form.component';
import { heroSwitchComponents }   from './hero-switch.components';
import { SizerComponent }         from './sizer.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    BigHeroDetailComponent,
    HeroDetailComponent,
    HeroFormComponent,
    heroSwitchComponents,
    ClickDirective,
    ClickDirective2,
    SizerComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/click.directive.ts]" value="/* tslint:disable use-output-property-decorator directive-class-suffix */
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';

@Directive({selector: '[myClick]'})
export class ClickDirective {
  @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...

  toggle = false;

  constructor(el: ElementRef) {
    el.nativeElement
      .addEventListener('click', (event: Event) => {
        this.toggle = !this.toggle;
        this.clicks.emit(this.toggle ? 'Click!' : '');
      });
  }
}

@Directive({
  selector: '[myClick2]',
  outputs: ['clicks:myClick']  // propertyName:alias
})
export class ClickDirective2 {
  clicks = new EventEmitter<string>();
  toggle = false;

  constructor(el: ElementRef) {
    el.nativeElement
      .addEventListener('click', (event: Event) => {
        this.toggle = !this.toggle;
        this.clicks.emit(this.toggle ? 'Click2!' : '');
      });
  }
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/hero-detail.component.ts]" value="/* tslint:disable use-input-property-decorator use-output-property-decorator */
import { Component, EventEmitter, Input, Output } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-detail',
  inputs: ['hero'],
  outputs: ['deleteRequest'],
  styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
  template: `
  <div>
    <img src=&quot;{{heroImageUrl}}&quot;>
    <span [style.text-decoration]=&quot;lineThrough&quot;>
      {{prefix}} {{hero?.name}}
    </span>
    <button (click)=&quot;delete()&quot;>Delete</button>
  </div>`
})
export class HeroDetailComponent {
  hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
  // Public Domain terms of use: http://www.wpclipart.com/terms.html
  heroImageUrl = 'assets/images/hero.png';
  lineThrough = '';
  @Input() prefix = '';

  // This component makes a request but it can't actually delete a hero.
  deleteRequest = new EventEmitter<Hero>();

  delete() {
    this.deleteRequest.emit(this.hero);
    this.lineThrough = this.lineThrough ? '' : 'line-through';
  }
}

@Component({
  selector: 'app-big-hero-detail',
  template: `
  <div class=&quot;detail&quot;>
    <img src=&quot;{{heroImageUrl}}&quot;>
    <div><b>{{hero?.name}}</b></div>
    <div>Name: {{hero?.name}}</div>
    <div>Emotion: {{hero?.emotion}}</div>
    <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
    <div>Web: <a href=&quot;{{hero?.url}}&quot; target=&quot;_blank&quot;>{{hero?.url}}</a></div>
    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
    <br clear=&quot;all&quot;>
    <button (click)=&quot;delete()&quot;>Delete</button>
  </div>
  `,
  styles: [`
    .detail { border: 1px solid black; padding: 4px; max-width: 450px; }
    img     { float: left; margin-right: 8px; height: 100px; }
  `]
})
export class BigHeroDetailComponent extends HeroDetailComponent {

  @Input()  hero: Hero;
  @Output() deleteRequest = new EventEmitter<Hero>();

  delete() {
    this.deleteRequest.emit(this.hero);
  }
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/hero-form.component.ts]" value="import { Component, Input, ViewChild } from '@angular/core';
import { NgForm }                      from '@angular/forms';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styles: [`
    button { margin: 6px 0; }
    #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; }
  `]
})
export class HeroFormComponent {
  @Input() hero: Hero;
  @ViewChild('heroForm') form: NgForm;

  private _submitMessage = '';

  get submitMessage() {
    if (!this.form.valid) {
      this._submitMessage = '';
    }
    return this._submitMessage;
  }

  onSubmit(form: NgForm) {
    this._submitMessage =  'Submitted. form value is ' + JSON.stringify(form.value);
  }
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/hero-switch.components.ts]" value="import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'app-happy-hero',
  template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
})
export class HappyHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'app-sad-hero',
  template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
})
export class SadHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'app-confused-hero',
  template: `Are you as confused as {{hero.name}}?`
})
export class ConfusedHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'app-unknown-hero',
  template: `{{message}}`
})
export class UnknownHeroComponent {
  @Input() hero: Hero;
  get message() {
    return this.hero &amp;&amp; this.hero.name ?
      `${this.hero.name} is strange and mysterious.` :
      'Are you feeling indecisive?';
  }
}

export const heroSwitchComponents =
  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/hero.ts]" value="export class Hero {
  static nextId = 0;

  static heroes: Hero[] = [
    new Hero(
      null,
      'Hercules',
      'happy',
      new Date(1970, 1, 25),
      'http://www.imdb.com/title/tt0065832/',
      325
    ),
    new Hero(1, 'Mr. Nice',  'happy'),
    new Hero(2, 'Narco',     'sad' ),
    new Hero(3, 'Windstorm', 'confused' ),
    new Hero(4, 'Magneta')
  ];


  constructor(
    public id?: number,
    public name?: string,
    public emotion?: string,
    public birthdate?: Date,
    public url?: string,
    public rate = 100,
    ) {
    this.id = id ? id : Hero.nextId++;
  }

  clone(): Hero {
    return Object.assign(new Hero(), this);
  }
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/sizer.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
  <div>
    <button (click)=&quot;dec()&quot; title=&quot;smaller&quot;>-</button>
    <button (click)=&quot;inc()&quot; title=&quot;bigger&quot;>+</button>
    <label [style.font-size.px]=&quot;size&quot;>FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/environments/environment.prod.ts]" value="export const environment = {
  production: true
};


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/environments/environment.ts]" value="// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/main.ts]" value="import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &quot;evergreen&quot; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/**
 * If the application will be indexed by Google Search, the following is required.
 * Googlebot uses a renderer based on Chrome 41.
 * https://developers.google.com/search/docs/guides/rendering
 **/
// import 'core-js/es6/array';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
/**
 * DO NOT REMOVE
 * By default, Reflect polyfills are auto-included by the CLI and
 * are required for JIT compilation.  StackBlitz examples are
 * compiled using JIT.
 */
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/app.component.css]" value="a.to-toc { margin: 30px 0; }
button { font-size: 100%; margin: 0 2px; }
div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0}
#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;}
img {height: 100px;}
.box {border: 1px solid black; padding: 6px; max-width: 450px;}
.child-div {margin-left: 1em; font-weight: normal}
.context {margin-left: 1em;}
.hidden {display: none}
.parent-div {margin-top: 1em; font-weight: bold}
.special {font-weight:bold; font-size: x-large}
.bad {color: red;}
.saveable {color: limegreen;}
.curly, .modified {font-family: &quot;Brush Script MT&quot;}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
.to-toc {margin-top: 10px; display: block}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/styles.css]" value="/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[src/app/app.component.html]" value="<a id=&quot;toc&quot;></a>
<h1>Template Syntax</h1>
<a href=&quot;#interpolation&quot;>Interpolation</a><br>
<a href=&quot;#expression-context&quot;>Expression context</a><br>
<a href=&quot;#statement-context&quot;>Statement context</a><br>
<a href=&quot;#mental-model&quot;>Mental Model</a><br>
<a href=&quot;#buttons&quot;>Buttons</a><br>
<a href=&quot;#prop-vs-attrib&quot;>Properties vs. Attributes</a><br>
<br>
<a href=&quot;#property-binding&quot;>Property Binding</a><br>
<div style=&quot;margin-left:8px&quot;>
  <a href=&quot;#attribute-binding&quot;>Attribute Binding</a><br>
  <a href=&quot;#class-binding&quot;>Class Binding</a><br>
  <a href=&quot;#style-binding&quot;>Style Binding</a><br>
</div>
<br>
<a href=&quot;#event-binding&quot;>Event Binding</a><br>
<a href=&quot;#two-way&quot;>Two-way Binding</a><br>
<br>
<div>Directives</div>
<div style=&quot;margin-left:8px&quot;>
  <a href=&quot;#ngModel&quot;>NgModel (two-way) Binding</a><br>
  <a href=&quot;#ngClass&quot;>NgClass Binding</a><br>
  <a href=&quot;#ngStyle&quot;>NgStyle Binding</a><br>
  <a href=&quot;#ngIf&quot;>NgIf</a><br>
  <a href=&quot;#ngFor&quot;>NgFor</a><br>
  <div style=&quot;margin-left:8px&quot;>
    <a href=&quot;#ngFor-index&quot;>NgFor with index</a><br>
    <a href=&quot;#ngFor-trackBy&quot;>NgFor with trackBy</a><br>
  </div>
  <a href=&quot;#ngSwitch&quot;>NgSwitch</a><br>
</div>
<br>
<a href=&quot;#ref-vars&quot;>Template reference variables</a><br>
<a href=&quot;#inputs-and-outputs&quot;>Inputs and outputs</a><br>
<a href=&quot;#pipes&quot;>Pipes</a><br>
<a href=&quot;#safe-navigation-operator&quot;>Safe navigation operator <i>?.</i></a><br>
<a href=&quot;#non-null-assertion-operator&quot;>Non-null assertion operator <i>!.</i></a><br>
<a href=&quot;#enums&quot;>Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id=&quot;interpolation&quot;>Interpolation</h2>

<p>My current hero is {{currentHero.name}}</p>

<h3>
  {{title}}
  <img src=&quot;{{heroImageUrl}}&quot; style=&quot;height:30px&quot;>
</h3>

<!-- &quot;The sum of 1 + 1 is 2&quot; -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

<!-- &quot;The sum of 1 + 1 is not 4&quot; -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<hr><h2 id=&quot;expression-context&quot;>Expression context</h2>

<p>Component expression context (&amp;#123;&amp;#123;title&amp;#125;&amp;#125;, [hidden]=&quot;isUnchanged&quot;)</p>
<div class=&quot;context&quot;>
  {{title}}
  <span [hidden]=&quot;isUnchanged&quot;>changed</span>
</div>


<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor=&quot;let hero of heroes&quot;>{{hero.name}}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)=&quot;0&quot; class=&quot;context&quot;>
  Type something:
  <input #heroInput> {{heroInput.value}}
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<hr><h2 id=&quot;statement-context&quot;>Statement context</h2>

<p>Component statement context ( (click)=&quot;onSave() )
<div class=&quot;context&quot;>
  <button (click)=&quot;deleteHero()&quot;>Delete hero</button>
</div>

<p>Template $event statement context</p>
<div class=&quot;context&quot;>
  <button (click)=&quot;onSave($event)&quot;>Save</button>
</div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class=&quot;context&quot;>
  <button *ngFor=&quot;let hero of heroes&quot; (click)=&quot;deleteHero(hero)&quot;>{{hero.name}}</button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class=&quot;context&quot;>
  <form #heroForm (ngSubmit)=&quot;onSubmit(heroForm)&quot;> ... </form>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- New Mental Model -->
<hr><h2 id=&quot;mental-model&quot;>New Mental Model</h2>

<!--<img src=&quot;http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png&quot;>-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class=&quot;special&quot;>Mental Model</div>
<img src=&quot;assets/images/hero.png&quot;>
<button disabled>Save</button>
<br><br>

<div>
  <!-- Normal HTML -->
  <div class=&quot;special&quot;>Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br><br>

<div>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button [disabled]=&quot;isUnchanged&quot;>Save</button>
</div>
<br><br>

<div>
  <img [src]=&quot;heroImageUrl&quot;>
  <app-hero-detail [hero]=&quot;currentHero&quot;></app-hero-detail>
  <div [ngClass]=&quot;{'special': isSpecial}&quot;></div>
</div>
<br><br>

<button (click)=&quot;onSave()&quot;>Save</button>
<app-hero-detail (deleteRequest)=&quot;deleteHero()&quot;></app-hero-detail>
<div (myClick)=&quot;clicked=$event&quot; clickable>click me</div>
{{clicked}}
<br><br>

<div>
  Hero Name:
  <input [(ngModel)]=&quot;name&quot;>
  {{name}}
</div>
<br><br>

<button [attr.aria-label]=&quot;help&quot;>help</button>
<br><br>

<div [class.special]=&quot;isSpecial&quot;>Special</div>
<br><br>

<button [style.color]=&quot;isSpecial ? 'red' : 'green'&quot;>
button</button>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- property vs. attribute -->
<hr><h2 id=&quot;prop-vs-attrib&quot;>Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src=&quot;images/ng-logo.png&quot;
    [src]=&quot;heroImageUrl&quot;>

<br><br>

<img [src]=&quot;iconUrl&quot;/>
<img bind-src=&quot;heroImageUrl&quot;/>
<img [attr.src]=&quot;villainImageUrl&quot;/>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- buttons -->
<hr><h2 id=&quot;buttons&quot;>Buttons</h2>

<button>Enabled (but does nothing)</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<br><br>
<button disabled>disabled by attribute</button>
<button [disabled]=&quot;isUnchanged&quot;>disabled by property binding</button>
<br><br>
<button bind-disabled=&quot;isUnchanged&quot; on-click=&quot;onSave($event)&quot;>Disabled Cancel</button>
<button [disabled]=&quot;!canSave&quot; (click)=&quot;onSave($event)&quot;>Enabled Save</button>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- property binding -->
<hr><h2 id=&quot;property-binding&quot;>Property Binding</h2>

<img [src]=&quot;heroImageUrl&quot;>
<button [disabled]=&quot;isUnchanged&quot;>Cancel is disabled</button>
<div [ngClass]=&quot;classes&quot;>[ngClass] binding to the classes property</div>
<app-hero-detail [hero]=&quot;currentHero&quot;></app-hero-detail>
<img bind-src=&quot;heroImageUrl&quot;>

<!-- ERROR: HeroDetailComponent.hero expects a
     Hero object, not the string &quot;currentHero&quot; -->
<div *ngIf=&quot;false&quot;>
  <app-hero-detail hero=&quot;currentHero&quot;></app-hero-detail>
</div>
<app-hero-detail prefix=&quot;You are my&quot; [hero]=&quot;currentHero&quot;></app-hero-detail>

<p><img src=&quot;{{heroImageUrl}}&quot;> is the <i>interpolated</i> image.</p>
<p><img [src]=&quot;heroImageUrl&quot;> is the <i>property bound</i> image.</p>

<p><span>&quot;{{title}}&quot; is the <i>interpolated</i> title.</span></p>
<p>&quot;<span [innerHTML]=&quot;title&quot;></span>&quot; is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
<p><span>&quot;{{evilTitle}}&quot; is the <i>interpolated</i> evil title.</span></p>
<p>&quot;<span [innerHTML]=&quot;evilTitle&quot;></span>&quot; is the <i>property bound</i> evil title.</p>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- attribute binding -->
<hr><h2 id=&quot;attribute-binding&quot;>Attribute Binding</h2>

<!--  create and set a colspan attribute -->
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]=&quot;1 + 1&quot;>One-Two</td></tr>

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan=&quot;{{1 + 1}}&quot;>Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

<br>
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]=&quot;actionName&quot;>{{actionName}} with Aria</button>
<br><br>

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]=&quot;isUnchanged&quot;>Disabled</button>

  <button [attr.disabled]=&quot;!isUnchanged&quot;>Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]=&quot;false&quot;>Enabled (but inert)</button>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- class binding -->
<hr><h2 id=&quot;class-binding&quot;>Class Binding</h2>

<!-- standard class attribute setting  -->
<div class=&quot;bad curly special&quot;>Bad curly special</div>

<!-- reset/override all class names with a binding  -->
<div class=&quot;bad curly special&quot;
     [class]=&quot;badCurly&quot;>Bad curly</div>

<!-- toggle the &quot;special&quot; class on/off with a property -->
<div [class.special]=&quot;isSpecial&quot;>The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class=&quot;special&quot;
     [class.special]=&quot;!isSpecial&quot;>This one is not so special</div>

<div bind-class.special=&quot;isSpecial&quot;>This class binding is special too</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!--style binding -->
<hr><h2 id=&quot;style-binding&quot;>Style Binding</h2>

<button [style.color]=&quot;isSpecial ? 'red': 'green'&quot;>Red</button>
<button [style.background-color]=&quot;canSave ? 'cyan': 'grey'&quot; >Save</button>

<button [style.font-size.em]=&quot;isSpecial ? 3 : 1&quot; >Big</button>
<button [style.font-size.%]=&quot;!isSpecial ? 150 : 50&quot; >Small</button>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- event binding -->
<hr><h2 id=&quot;event-binding&quot;>Event Binding</h2>

<button (click)=&quot;onSave()&quot;>Save</button>

<button on-click=&quot;onSave()&quot;>On Save</button>

<div>
<!-- `myClick` is an event on the custom `ClickDirective` -->
<div (myClick)=&quot;clickMessage=$event&quot; clickable>click with myClick</div>
{{clickMessage}}
</div>


<!-- binding to a nested component -->
<app-hero-detail (deleteRequest)=&quot;deleteHero($event)&quot; [hero]=&quot;currentHero&quot;></app-hero-detail>
<br>

<app-big-hero-detail
    (deleteRequest)=&quot;deleteHero($event)&quot;
    [hero]=&quot;currentHero&quot;>
</app-big-hero-detail>

<div class=&quot;parent-div&quot; (click)=&quot;onClickMe($event)&quot; clickable>Click me
  <div class=&quot;child-div&quot;>Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)=&quot;onSave()&quot; clickable>
  <button (click)=&quot;onSave($event)&quot;>Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)=&quot;onSave()&quot; clickable>
  <button (click)=&quot;onSave()&quot;>Save w/ propagation</button>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<hr><h2 id=&quot;two-way&quot;>Two-way Binding</h2>
<div id=&quot;two-way-1&quot;>
  <app-sizer [(size)]=&quot;fontSizePx&quot;></app-sizer>
  <div [style.font-size.px]=&quot;fontSizePx&quot;>Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]=&quot;fontSizePx&quot;></label>
</div>
<br>
<div id=&quot;two-way-2&quot;>
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]=&quot;fontSizePx&quot; (sizeChange)=&quot;fontSizePx=$event&quot;></app-sizer>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- Two way data binding unwound;
    passing the changed display value to the event handler via `$event` -->
<hr><h2 id=&quot;ngModel&quot;>NgModel (two-way) Binding</h2>

<h3>Result: {{currentHero.name}}</h3>

<input [value]=&quot;currentHero.name&quot;
       (input)=&quot;currentHero.name=$event.target.value&quot; >
without NgModel
<br>
<input [(ngModel)]=&quot;currentHero.name&quot;>
[(ngModel)]
<br>
<input bindon-ngModel=&quot;currentHero.name&quot;>
bindon-ngModel
<br>
<input
  [ngModel]=&quot;currentHero.name&quot;
  (ngModelChange)=&quot;currentHero.name=$event&quot;>
(ngModelChange)=&quot;...name=$event&quot;
<br>
<input
  [ngModel]=&quot;currentHero.name&quot;
  (ngModelChange)=&quot;setUppercaseName($event)&quot;>
(ngModelChange)=&quot;setUppercaseName($event)&quot;

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgClass binding -->
<hr><h2 id=&quot;ngClass&quot;>NgClass Binding</h2>

<p>currentClasses is {{currentClasses | json}}</p>
<div [ngClass]=&quot;currentClasses&quot;>This div is initially saveable, unchanged, and special</div>

<!-- not used in chapter -->
<br>
<label>saveable   <input type=&quot;checkbox&quot; [(ngModel)]=&quot;canSave&quot;></label> |
<label>modified:  <input type=&quot;checkbox&quot; [value]=&quot;!isUnchanged&quot; (change)=&quot;isUnchanged=!isUnchanged&quot;></label> |
<label>special:   <input type=&quot;checkbox&quot; [(ngModel)]=&quot;isSpecial&quot;></label>
<button (click)=&quot;setCurrentClasses()&quot;>Refresh currentClasses</button>
<br><br>
<div [ngClass]=&quot;currentClasses&quot;>
  This div should be {{ canSave ? &quot;&quot;: &quot;not&quot;}} saveable,
                  {{ isUnchanged ? &quot;unchanged&quot; : &quot;modified&quot; }} and,
                  {{ isSpecial ? &quot;&quot;: &quot;not&quot;}} special after clicking &quot;Refresh&quot;.</div>
<br><br>

<div [ngClass]=&quot;isSpecial ? 'special' : ''&quot;>This div is special</div>

<div class=&quot;bad curly special&quot;>Bad curly special</div>
<div [ngClass]=&quot;{'bad':false, 'curly':true, 'special':true}&quot;>Curly special</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgStyle binding -->
<hr><h2 id=&quot;ngStyle&quot;>NgStyle Binding</h2>

<div [style.font-size]=&quot;isSpecial ? 'x-large' : 'smaller'&quot; >
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{currentStyles | json}}</p>
<div [ngStyle]=&quot;currentStyles&quot;>
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br>
<label>italic: <input type=&quot;checkbox&quot; [(ngModel)]=&quot;canSave&quot;></label> |
<label>normal: <input type=&quot;checkbox&quot; [(ngModel)]=&quot;isUnchanged&quot;></label> |
<label>xlarge: <input type=&quot;checkbox&quot; [(ngModel)]=&quot;isSpecial&quot;></label>
<button (click)=&quot;setCurrentStyles()&quot;>Refresh currentStyles</button>
<br><br>
<div [ngStyle]=&quot;currentStyles&quot;>
  This div should be {{ canSave ? &quot;italic&quot;: &quot;plain&quot;}},
                  {{ isUnchanged ? &quot;normal weight&quot; : &quot;bold&quot; }} and,
                  {{ isSpecial ? &quot;extra large&quot;: &quot;normal size&quot;}} after clicking &quot;Refresh&quot;.</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgIf binding -->
<hr><h2 id=&quot;ngIf&quot;>NgIf Binding</h2>

<app-hero-detail *ngIf=&quot;isActive&quot;></app-hero-detail>

<div *ngIf=&quot;currentHero&quot;>Hello, {{currentHero.name}}</div>
<div *ngIf=&quot;nullHero&quot;>Hello, {{nullHero.name}}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]=&quot;currentHero&quot;>Add {{currentHero.name}} with template</ng-template>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]=&quot;isActive&quot;>
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]=&quot;!isSpecial&quot;>Show with class</div>
<div [class.hidden]=&quot;isSpecial&quot;>Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]=&quot;isSpecial&quot;></app-hero-detail>

<div [style.display]=&quot;isSpecial ? 'block' : 'none'&quot;>Show with style</div>
<div [style.display]=&quot;isSpecial ? 'none'  : 'block'&quot;>Hide with style</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgFor binding -->
<hr><h2 id=&quot;ngFor&quot;>NgFor Binding</h2>

<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes&quot;>{{hero.name}}</div>
</div>
<br>

<div class=&quot;box&quot;>
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor=&quot;let hero of heroes&quot; [hero]=&quot;hero&quot;></app-hero-detail>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<h4 id=&quot;ngFor-index&quot;>*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes; let i=index&quot;>{{i + 1}} - {{hero.name}}</div>
</div>

<p>with <i>comma</i> separator</p>
<div class=&quot;box&quot;>
  <!-- Ex: &quot;1 - Hercules&quot; -->
  <div *ngFor=&quot;let hero of heroes, let i=index&quot;>{{i + 1}} - {{hero.name}}</div>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<h4 id=&quot;ngFor-trackBy&quot;>*ngFor trackBy</h4>
<button (click)=&quot;resetHeroes()&quot;>Reset heroes</button>
<button (click)=&quot;changeIds()&quot;>Change ids</button>
<button (click)=&quot;clearTrackByCounts()&quot;>Clear counts</button>

<p><i>without</i> trackBy</p>
<div class=&quot;box&quot;>
  <div #noTrackBy *ngFor=&quot;let hero of heroes&quot;>({{hero.id}}) {{hero.name}}</div>

  <div id=&quot;noTrackByCnt&quot; *ngIf=&quot;heroesNoTrackByCount&quot; >
    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class=&quot;box&quot;>
  <div #withTrackBy *ngFor=&quot;let hero of heroes; trackBy: trackByHeroes&quot;>({{hero.id}}) {{hero.name}}</div>

  <div id=&quot;withTrackByCnt&quot; *ngIf=&quot;heroesWithTrackByCount&quot;>
    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
  </div>
</div>

<br><br><br>

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes; trackBy: trackByHeroes&quot;>
    ({{hero.id}}) {{hero.name}}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes, trackBy: trackByHeroes&quot;>({{hero.id}}) {{hero.name}}</div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes trackBy: trackByHeroes&quot;>({{hero.id}}) {{hero.name}}</div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class=&quot;box&quot;>
  <div *ngFor=&quot;let hero of heroes, trackBy: trackById&quot;>({{hero.id}}) {{hero.name}}</div>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgSwitch binding -->
<hr><h2 id=&quot;ngSwitch&quot;>NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor=&quot;let h of heroes&quot;>
    <input type=&quot;radio&quot; name=&quot;heroes&quot; [(ngModel)]=&quot;currentHero&quot; [value]=&quot;h&quot;>{{h.name}}
  </label>
</div>

<div [ngSwitch]=&quot;currentHero.emotion&quot;>
  <app-happy-hero    *ngSwitchCase=&quot;'happy'&quot;    [hero]=&quot;currentHero&quot;></app-happy-hero>
  <app-sad-hero      *ngSwitchCase=&quot;'sad'&quot;      [hero]=&quot;currentHero&quot;></app-sad-hero>
  <app-confused-hero *ngSwitchCase=&quot;'confused'&quot; [hero]=&quot;currentHero&quot;></app-confused-hero>
  <div *ngSwitchCase=&quot;'confused'&quot;>Are you as confused as {{currentHero.name}}?</div>
  <app-unknown-hero  *ngSwitchDefault           [hero]=&quot;currentHero&quot;></app-unknown-hero>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- template reference variable -->
<hr><h2 id=&quot;ref-vars&quot;>Template reference variables</h2>

<input #phone placeholder=&quot;phone number&quot;>

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)=&quot;callPhone(phone.value)&quot;>Call</button>

<input ref-fax placeholder=&quot;fax number&quot;>
<button (click)=&quot;callFax(fax.value)&quot;>Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [innerHTML]=&quot;'disabled by attribute: '+btn.disabled&quot;></button>

<h4>Example Form</h4>
<app-hero-form [hero]=&quot;currentHero&quot;></app-hero-form>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- inputs and output -->
<hr><h2 id=&quot;inputs-and-outputs&quot;>Inputs and Outputs</h2>

<img [src]=&quot;iconUrl&quot;/>
<button (click)=&quot;onSave()&quot;>Save</button>

<app-hero-detail [hero]=&quot;currentHero&quot; (deleteRequest)=&quot;deleteHero($event)&quot;>
</app-hero-detail>

<div (myClick)=&quot;clickMessage2=$event&quot; clickable>myClick2</div>
{{clickMessage2}}

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- Pipes -->
<hr><h2 id=&quot;pipes&quot;>Pipes</h2>

<div>Title through uppercase pipe: {{title | uppercase}}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>
  Title through a pipe chain:
  {{title | uppercase | lowercase}}
</div>

<!-- pipe with configuration argument => &quot;February 25, 1970&quot; -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

<div>{{currentHero | json}}</div>

<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{product.price | currency:'USD':true}}
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- Null values and the safe navigation operator -->
<hr><h2 id=&quot;safe-navigation-operator&quot;>Safe navigation operator <i>?.</i></h2>

<div>
  The title is {{title}}
</div>

<div>
  The current hero's name is {{currentHero?.name}}
</div>

<div>
  The current hero's name is {{currentHero.name}}
</div>


<!--
The null hero's name is {{nullHero.name}}

See console log:
  TypeError: Cannot read property 'name' of null in [null]
-->

<!--No hero, div not displayed, no error -->
<div *ngIf=&quot;nullHero&quot;>The null hero's name is {{nullHero.name}}</div>

<div>
The null hero's name is {{nullHero &amp;&amp; nullHero.name}}
</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{nullHero?.name}}
</div>


<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- non-null assertion operator -->
<hr><h2 id=&quot;non-null-assertion-operator&quot;>Non-null assertion operator <i>!.</i></h2>

<div>
  <!--No hero, no text -->
  <div *ngIf=&quot;hero&quot;>
    The hero's name is {{hero!.name}}
  </div>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- non-null assertion operator -->
<hr><h2 id=&quot;any-type-cast-function&quot;>$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    The hero's marker is {{$any(hero).marker}}
  </div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    Undeclared members is {{$any(this).member}}
  </div>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2 id=&quot;enums&quot;>Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
  The current color is {{Color[color]}} and its number is {{color}}.<br>
  <button [style.color]=&quot;Color[color]&quot; (click)=&quot;colorToggle()&quot;>Enum Toggle</button>
</p>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>


<!-- 
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->"><input type="hidden" name="files[src/app/hero-form.component.html]" value="<div id=&quot;heroForm&quot;>
  <form (ngSubmit)=&quot;onSubmit(heroForm)&quot; #heroForm=&quot;ngForm&quot;>
    <div class=&quot;form-group&quot;>
      <label for=&quot;name&quot;>Name
        <input class=&quot;form-control&quot; name=&quot;name&quot; required [(ngModel)]=&quot;hero.name&quot;>
      </label>
    </div>
    <button type=&quot;submit&quot; [disabled]=&quot;!heroForm.form.valid&quot;>Submit</button>
  </form>
  <div [hidden]=&quot;!heroForm.form.valid&quot;>
    {{submitMessage}}
  </div>
</div>


<!-- 
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->"><input type="hidden" name="files[src/index.html]" value="<!DOCTYPE html>
<html lang=&quot;en&quot;>
  <head>
    <title>Template Syntax</title>
    <base href=&quot;/&quot;>
    <meta charset=&quot;UTF-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
  </head>

  <body>
    <app-root></app-root>
  </body>

</html>


<!-- 
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->"><input type="hidden" name="files[angular.json]" value="{
  &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
  &quot;version&quot;: 1,
  &quot;newProjectRoot&quot;: &quot;projects&quot;,
  &quot;projects&quot;: {
    &quot;angular.io-example&quot;: {
      &quot;root&quot;: &quot;&quot;,
      &quot;sourceRoot&quot;: &quot;src&quot;,
      &quot;projectType&quot;: &quot;application&quot;,
      &quot;prefix&quot;: &quot;app&quot;,
      &quot;schematics&quot;: {},
      &quot;architect&quot;: {
        &quot;build&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
          &quot;options&quot;: {
            &quot;outputPath&quot;: &quot;dist&quot;,
            &quot;index&quot;: &quot;src/index.html&quot;,
            &quot;main&quot;: &quot;src/main.ts&quot;,
            &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
            &quot;tsConfig&quot;: &quot;src/tsconfig.app.json&quot;,
            &quot;assets&quot;: [
              &quot;src/favicon.ico&quot;,
              &quot;src/assets&quot;
            ],
            &quot;styles&quot;: [
              &quot;src/styles.css&quot;
            ],
            &quot;scripts&quot;: []
          },
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;fileReplacements&quot;: [
                {
                  &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                  &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                }
              ],
              &quot;optimization&quot;: true,
              &quot;outputHashing&quot;: &quot;all&quot;,
              &quot;sourceMap&quot;: false,
              &quot;extractCss&quot;: true,
              &quot;namedChunks&quot;: false,
              &quot;aot&quot;: true,
              &quot;extractLicenses&quot;: true,
              &quot;vendorChunk&quot;: false,
              &quot;buildOptimizer&quot;: true,
              &quot;budgets&quot;: [
                {
                  &quot;type&quot;: &quot;initial&quot;,
                  &quot;maximumWarning&quot;: &quot;2mb&quot;,
                  &quot;maximumError&quot;: &quot;5mb&quot;
                }
              ]
            }
          }
        },
        &quot;serve&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
          &quot;options&quot;: {
            &quot;browserTarget&quot;: &quot;angular.io-example:build&quot;
          },
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;browserTarget&quot;: &quot;angular.io-example:build:production&quot;
            }
          }
        },
        &quot;extract-i18n&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
          &quot;options&quot;: {
            &quot;browserTarget&quot;: &quot;angular.io-example:build&quot;
          }
        },
        &quot;test&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
          &quot;options&quot;: {
            &quot;main&quot;: &quot;src/test.ts&quot;,
            &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
            &quot;tsConfig&quot;: &quot;src/tsconfig.spec.json&quot;,
            &quot;karmaConfig&quot;: &quot;src/karma.conf.js&quot;,
            &quot;styles&quot;: [
              &quot;src/styles.css&quot;
            ],
            &quot;scripts&quot;: [],
            &quot;assets&quot;: [
              &quot;src/favicon.ico&quot;,
              &quot;src/assets&quot;
            ]
          }
        },
        &quot;lint&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
          &quot;options&quot;: {
            &quot;tsConfig&quot;: [
              &quot;src/tsconfig.app.json&quot;,
              &quot;src/tsconfig.spec.json&quot;
            ],
            &quot;exclude&quot;: [
              &quot;**/node_modules/**&quot;
            ]
          }
        }
      }
    },
    &quot;angular.io-example-e2e&quot;: {
      &quot;root&quot;: &quot;e2e/&quot;,
      &quot;projectType&quot;: &quot;application&quot;,
      &quot;prefix&quot;: &quot;&quot;,
      &quot;architect&quot;: {
        &quot;e2e&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
          &quot;options&quot;: {
            &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
            &quot;devServerTarget&quot;: &quot;angular.io-example:serve&quot;
          },
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;devServerTarget&quot;: &quot;angular.io-example:serve:production&quot;
            }
          }
        },
        &quot;lint&quot;: {
          &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
          &quot;options&quot;: {
            &quot;tsConfig&quot;: &quot;e2e/tsconfig.e2e.json&quot;,
            &quot;exclude&quot;: [
              &quot;**/node_modules/**&quot;
            ]
          }
        }
      }
    }
  },
  &quot;defaultProject&quot;: &quot;angular.io-example&quot;
}
"><input type="hidden" name="files[src/assets/images/hero.base64.png]" value="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"><input type="hidden" name="files[src/assets/images/ng-logo.base64.png]" value="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"><input type="hidden" name="files[src/assets/images/villain.base64.png]" value="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"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="template"><input type="hidden" name="description" value="Angular Example - Template Syntax Collection"><input type="hidden" name="dependencies" value="{&quot;@angular/animations&quot;:&quot;^7.0.0&quot;,&quot;@angular/common&quot;:&quot;^7.0.0&quot;,&quot;@angular/compiler&quot;:&quot;^7.0.0&quot;,&quot;@angular/core&quot;:&quot;^7.0.0&quot;,&quot;@angular/forms&quot;:&quot;^7.0.0&quot;,&quot;@angular/http&quot;:&quot;^7.0.0&quot;,&quot;@angular/platform-browser&quot;:&quot;^7.0.0&quot;,&quot;@angular/platform-browser-dynamic&quot;:&quot;^7.0.0&quot;,&quot;@angular/router&quot;:&quot;^7.0.0&quot;,&quot;angular-in-memory-web-api&quot;:&quot;^0.6.0&quot;,&quot;core-js&quot;:&quot;^2.5.4&quot;,&quot;rxjs&quot;:&quot;^6.3.0&quot;,&quot;web-animations-js&quot;:&quot;^2.3.1&quot;,&quot;zone.js&quot;:&quot;~0.8.26&quot;,&quot;jasmine-core&quot;:&quot;~2.99.1&quot;,&quot;jasmine-marbles&quot;:&quot;^0.4.0&quot;}"></form>
    <script>
      var embedded = 'ctl=1';
      var isEmbedded = window.location.search.indexOf(embedded) > -1;

      if (isEmbedded) {
        var form = document.getElementById('mainForm');
        var action = form.action;
        var actionHasParams = action.indexOf('?') > -1;
        var symbol = actionHasParams ? '&' : '?'
        form.action = form.action + symbol + embedded;
      }
      document.getElementById("mainForm").submit();
    </script>
    </body></html>